<template>
  <div>
    <table class="table table-sm table-bordered approve-table">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr>
          <td>{{ approveData.label }}</td>
          <td colspan="3">
            <div v-for="(r, index) of records" :key="index" class="p-item">
              <record-item :record-data="r"></record-item>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import RecordItem from '@/credit/views/county/unionProvince/components/projectApprove/RecordItem'

export default {
  components: {
    RecordItem,
  },
  props: {
    approveData: {
      type: Object,
      default: () => ({
        editable: false,
        record: [],
      }),
    },
  },
  data() {
    return {}
  },
  computed: {
    records() {
      return this.approveData.record.filter(it => it.approval_status > 0)
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
